import React, { useRef, useState } from 'react';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { OrbitControls, Html } from '@react-three/drei';
import {PlaneGeometry as planeGeometry,RingGeometry as ringGeometry,TorusGeometry as torusGeometry,SphereGeometry as sphereGeometry,MeshStandardMaterial as meshStandardMaterial,Mesh as mesh,Points as points, BoxGeometry as boxGeometry,BufferAttribute as bufferAttribute,BufferGeometry as bufferGeometry,ConeGeometry,CylinderGeometry as cylinderGeometry,PointsMaterial as pointsMaterial  } from 'three';
import { ConeGeometry as ThreeConeGeometry } from 'three'; // 从 three 库导入 ConeGeometry 类

// 粒子系统组件 
const ParticleSystem = ({ count = 600, radius = 8 }) => {
  const [particles] = useState(() => {
    const positions = new Float32Array(count * 3);
    const colors = new Float32Array(count * 3);
    
    for (let i = 0; i < count; i++) {
      const i3 = i * 3;
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.random() * Math.PI;
      const r = radius * (0.6 + Math.random() * 0.4);
      
      positions[i3] = r * Math.sin(phi) * Math.cos(theta);
      positions[i3 + 1] = r * Math.sin(phi) * Math.sin(theta);
      positions[i3 + 2] = r * Math.cos(phi);
      
      const green = 0.7 + Math.random() * 0.3;
      colors[i3] = 0.2 + Math.random() * 0.3;     
      colors[i3 + 1] = green;                    
      colors[i3 + 2] = 0.1 + Math.random() * 0.2; 
    }
    
    return { positions, colors };
  });
  const meshRef = useRef(null);
  const { camera } = useThree();

  useFrame((state) => {
    if (!meshRef.current) return;
    const geometry = meshRef.current.geometry;
    if (!geometry || !geometry.attributes.position) return;

    const positionAttr = geometry.attributes.position;
    const positions = positionAttr.array; 

    for (let i = 0; i < positions.length; i += 15) {
      positions[i + 1] += Math.sin(i * 0.05 + state.clock.elapsedTime) * 0.01;
    }
    positionAttr.needsUpdate = true; 
    meshRef.current.lookAt(camera.position);
  });

  return (
    <points ref={meshRef} frustumCulled={false}>
      <bufferGeometry>
        <bufferAttribute
          attach="attributes.position"
          count={particles.positions.length / 3}
          array={particles.positions}
          itemSize={3}
        />
        <bufferAttribute
          attach="attributes.color"
          count={particles.colors.length / 3}
          array={particles.colors}
          itemSize={3}
        />
      </bufferGeometry>
      <pointsMaterial 
        size={0.1}
        sizeAttenuation
        vertexColors
        transparent
        opacity={0.7}
        depthWrite={false}
        blending={2} 
      />
    </points>
  );
};

// 安卓机器人头部组件
const RobotHead = ({ isHovered }) => {
  return (
    <group>
      <mesh>
        <cylinderGeometry args={[1.8, 1.8, 1.5, 32]} />
        <meshStandardMaterial 
          color={isHovered ? "#4CAF50" : "#3DDC84"} 
          emissive={isHovered ? "#3DDC84" : "black"}
          emissiveIntensity={isHovered ? 0.3 : 0}
        />
      </mesh>
      <mesh position={[0, 1.2, 0]}>
        <cylinderGeometry args={[0.1, 0.1, 1, 16]} />
        <meshStandardMaterial color="#795548" />
      </mesh>
      <mesh position={[0, 2, 0]}>
        <sphereGeometry args={[0.2, 16, 16]} />
        <meshStandardMaterial color="#F44336" />
      </mesh>
      <mesh position={[-0.6, 0.3, 1.7]}>
        <sphereGeometry args={[0.3, 16, 16]} />
        <meshStandardMaterial 
          color={isHovered ? "white" : "#212121"} 
          emissive={isHovered ? "#ffffff" : "black"}
          emissiveIntensity={isHovered ? 0.8 : 0}
        />
      </mesh>
      <mesh position={[0.6, 0.3, 1.7]}>
        <sphereGeometry args={[0.3, 16, 16]} />
        <meshStandardMaterial 
          color={isHovered ? "white" : "#212121"} 
          emissive={isHovered ? "#ffffff" : "black"}
          emissiveIntensity={isHovered ? 0.8 : 0}
        />
      </mesh>
      <mesh position={[0, -0.4, 1.75]} rotation={[-Math.PI/2, 0, 0]}>
        <torusGeometry args={[0.5, 0.1, 16, 32]} />
        <meshStandardMaterial color="#212121" />
      </mesh>
    </group>
  );
};

// 安卓机器人身体组件
const RobotBody = ({ isHovered }) => {
  return (
    <group position={[0, -4, 0]}>
      <mesh>
        <boxGeometry args={[2.5, 3, 1.5]} />
        <meshStandardMaterial 
          color={isHovered ? "#4CAF50" : "#3DDC84"} 
          emissive={isHovered ? "#3DDC84" : "black"}
          emissiveIntensity={isHovered ? 0.3 : 0}
        />
      </mesh>
      <group position={[0, 0.2, 0.8]} scale={0.8}>
        <mesh>
          <ringGeometry args={[0.4, 0.7, 32]} />
          <meshStandardMaterial color="#212121" side={2} />
        </mesh>
        <mesh rotation={[Math.PI/2, 0, 0]}>
          <coneGeometry args={[0.3, 0.6, 3]} /> {/* 使用 drei 提供的小写组件形式 */}
          <meshStandardMaterial color="#212121" />
        </mesh>
      </group>
      <mesh position={[-2, 0, 0]}>
        <cylinderGeometry args={[0.5, 0.5, 3, 16]} />
        <meshStandardMaterial 
          color={isHovered ? "#4CAF50" : "#3DDC84"} 
          emissive={isHovered ? "#3DDC84" : "black"}
          emissiveIntensity={isHovered ? 0.3 : 0}
        />
      </mesh>
      <mesh position={[2, 0, 0]}>
        <cylinderGeometry args={[0.5, 0.5, 3, 16]} />
        <meshStandardMaterial 
          color={isHovered ? "#4CAF50" : "#3DDC84"} 
          emissive={isHovered ? "#3DDC84" : "black"}
          emissiveIntensity={isHovered ? 0.3 : 0}
        />
      </mesh>
      <mesh position={[-0.8, -2.5, 0]}>
        <cylinderGeometry args={[0.6, 0.6, 2.5, 16]} />
        <meshStandardMaterial 
          color={isHovered ? "#4CAF50" : "#3DDC84"} 
          emissive={isHovered ? "#3DDC84" : "black"}
          emissiveIntensity={isHovered ? 0.3 : 0}
        />
      </mesh>
      <mesh position={[0.8, -2.5, 0]}>
        <cylinderGeometry args={[0.6, 0.6, 2.5, 16]} />
        <meshStandardMaterial 
          color={isHovered ? "#4CAF50" : "#3DDC84"} 
          emissive={isHovered ? "#3DDC84" : "black"}
          emissiveIntensity={isHovered ? 0.3 : 0}
        />
      </mesh>
    </group>
  );
};

// 完整的安卓机器人组件
const AndroidRobot = () => {
  const groupRef = useRef();
  const [isHovered, setIsHovered] = useState(false);
  
  useFrame((state, delta) => {
    if (groupRef.current) {
      groupRef.current.rotation.y += delta * 1;
      const pulse = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.02;
      groupRef.current.scale.set(pulse, pulse, pulse);
    }
  });
  
  return (
    <group 
      ref={groupRef}
      position={[0, 2, 0]}
      onPointerOver={() => setIsHovered(true)}
      onPointerOut={() => setIsHovered(false)}
    >
      <RobotHead isHovered={isHovered} />
      <RobotBody isHovered={isHovered} />
    </group>
  );
};

// 主场景组件
const AndroidRobotScene = () => {
  return (
    <div style={{ width: '100vw', height: '100vh', margin: 0, overflow: 'hidden', background: '#0a0a0a' }}>
      <Canvas 
        shadows
        camera={{ position: [0, 5, 12], fov: 50 }}
        onCreated={(state) => {
          state.gl.setClearColor('#0a0a0a');
        }}
      >
        <ambientLight intensity={0.2} />
        <directionalLight 
          position={[10, 15, 7.5]} 
          intensity={1.2} 
          castShadow
          shadow-mapSize-width={2048}
          shadow-mapSize-height={2048}
          shadow-camera-near={1}
          shadow-camera-far={50}
        />
        <pointLight position={[-5, 5, -5]} intensity={0.4} color="#3DDC84" />
        <ParticleSystem count={800} radius={10} />
        <mesh position={[0, -3, 0]} rotation={[-Math.PI/2, 0, 0]} receiveShadow>
          <planeGeometry args={[50, 50]} />
          <meshStandardMaterial color="#121212" />
        </mesh>
        <AndroidRobot />
        <OrbitControls 
          enableZoom
          enablePan
          enableRotate
          zoomSpeed={0.7}
          rotateSpeed={0.5}
          maxPolarAngle={Math.PI/2 - 0.1}
        />
        <Html position={[0, -6, 0]} transform>
          <div style={{ 
            color: 'rgba(255,255,255,0.6)', 
            fontSize: '14px', 
            fontFamily: 'sans-serif',
            textAlign: 'center'
          }}>
            拖动: 旋转视角 | 滚轮: 缩放 | 悬停: 激活发光效果
          </div>
        </Html>
      </Canvas>
    </div>
  );
};

export default AndroidRobotScene;